<html>

<head>
    <title>定时调度配置列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../static/react/react.development.js" type="text/javascript"></script>
    <script src="../../static/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../../static/react/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="../../static/react/babel.min.js" type="text/javascript"></script>
    <!-- antd -->
    <link href="../../static/react/antd/antd.min.css" rel="stylesheet" type="text/css"/>
    <script src="../../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
    <!-- axios -->
    <script src="../../static/react/axios.min.js" type="text/javascript"></script>
    <script src="../../static/react/qs.js" type="text/javascript"></script>
    <script src="../../static/react/lodash.min.js" type="text/javascript"></script>
    <script src="../../static/react/request.js" type="text/javascript"></script>
    <script src="../../ffres/dict/all.js" type="text/javascript"></script>
    <link href="../../static/react/common.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="app"></div>
<script type="text/babel">
    // 请求后台相对路径
    const baseURL = "../../"
    // ant design 组件别名引用
    const {Row, Col, Form, Input, Select, DatePicker, Button, Table, Modal, message} = antd

    // 业务组件
    class App extends React.Component {
        constructor(props) {
            super(props)
            // 在构造器中获取引用实例
            this.formRef = React.createRef()
            this.modelFormRef = React.createRef()
            // 将组件内函数绑定 this 上下文
            this.query = this.query.bind(this)
            this.reset = this.reset.bind(this)
            this.doAdd = this.doAdd.bind(this)
            this.doUpdate = this.doUpdate.bind(this)
            this.doDelete = this.doDelete.bind(this)
            this.doView = this.doView.bind(this)
            this.doInitiate = this.doInitiate.bind(this)
            this.doDisable = this.doDisable.bind(this)
            this.doStart = this.doStart.bind(this)
            this.doShowHistory = this.doShowHistory.bind(this)
            this.onChangeJobType = this.onChangeJobType.bind(this)
            this.selectCron = this.selectCron.bind(this)
            this.handleModelClose = this.handleModelClose.bind(this)
            this.handleModlelOk = this.handleModlelOk.bind(this)
            this.tableSelect = this.tableSelect.bind(this)
            // 初始组件数据
            this.state = {
                list: [],
                pageInfo: {
                    page: 1,
                    size: 20,
                    total: 0,
                },
                modelTitle: "",
                show: "",
                loading: false,
                opType: "", // 操作类型
                rowSelection: null,
                selectedRowKeys: [],
                jobClassType: "local",
                selectCron: "",
                week: "",
                day: "",
                hour: "",
                minute: "",
                days: [],
                hours: [],
                minutes: [],
                dayShow: true,
                weekShow: true,
                hourShow: true,
                cron: "",
                serviceShow: false,
                versionRule: []
            }
        }

        reset() {
            this.formRef.current.resetFields()
        }

        // 查询列表
        query(page) {
            const self = this
            const pageInfo = this.state.pageInfo
            if (!page || typeof page != (typeof 1)) {
                pageInfo.page = 1;
            } else {
                pageInfo.page = page;
            }
            self.setState({pageInfo: pageInfo})
            API.request({
                baseURL: baseURL,
                method: "post",
                dataType: "form",
                url: "api/s/srvs/cron/confs/" + window.parent.subsCode,
                data: Qs.stringify({
                    // 查询条件值通过 Form 获取
                    ...this.formRef.current.getFieldsValue(),
                    // 分页信息
                    ...this.state.pageInfo
                })
            }).then(function (data) {
                const pageInfo = self.state.pageInfo
                pageInfo.total = data.total
                // 回写 state 中的值后  通过 setState 通知 react 更新 DOM
                self.setState({
                    list: data.rows.map(function (item, index) {
                        return {...item, key: index}
                    }),
                    pageInfo: pageInfo,
                })
            })

        }

        tableSelect(selectedRowKeys, selectedRows) {
            if (selectedRows && selectedRows.length > 0) {
                this.setState({
                    selectedRowKeys,
                    rowSelection: selectedRows[0]
                })
            }
        }

        doAdd() {
            this.setState({show: true, modelTitle: "定时调度配置新增", opType: "add"});
            setTimeout(() => this.modelFormRef.current.resetFields(), 50)
        }

        doInitiate() {
            const self = this
            if (self.state.rowSelection) {
                API.request({
                    baseURL: baseURL,
                    method: "POST",
                    url: "api/s/srvs/cron/conf/do/initial",
                    data: self.state.rowSelection,
                    dataType: "json"
                }).then(function (data) {
                    if (data.code == '-1') {
                        message.error(data.message)
                    } else {
                        message.success(data.message)
                    }
                    self.query(self.state.pageInfo.page)
                    self.setState({
                        selectedRowKeys: []
                    })
                })
            } else {
                message.warning("请选择一条数据！")
            }
        }

        doDisable() {
            const self = this
            if (self.state.rowSelection) {
                API.request({
                    baseURL: baseURL,
                    method: "POST",
                    url: "api/s/srvs/cron/conf/do/false",
                    data: self.state.rowSelection,
                    dataType: "json"
                }).then(function (data) {
                    if (data.code == '-1') {
                        message.error(data.message)
                    } else {
                        message.success(data.message)
                    }
                    self.query(self.state.pageInfo.page)
                    self.setState({
                        selectedRowKeys: []
                    })
                })
            } else {
                message.warning("请选择一条数据！")
            }
        }

        doStart() {
            const self = this
            if (self.state.rowSelection) {
                API.request({
                    baseURL: baseURL,
                    method: "POST",
                    url: "api/s/srvs/cron/conf/do/start",
                    data: self.state.rowSelection,
                    dataType: "json"
                }).then(function (data) {
                    if (data.code == '-1') {
                        message.error(data.message)
                    } else {
                        message.success(data.message)
                    }
                    self.query(self.state.pageInfo.page)
                    self.setState({
                        selectedRowKeys: []
                    })
                })
            } else {
                message.warning("请选择一条数据！")
            }
        }

        doShowHistory() {
            const self = this
            if (self.state.rowSelection) {
                // 要打开的新页面的url
                window.location.href = 'SSrvsCronHisList.html?' + 'jobCode=' + self.state.rowSelection.jobCode;
            } else {
                message.warning("请选择一条数据！")
            }

        }

        doUpdate() {
            const self = this
            if (self.state.rowSelection) {
                this.setState({show: true, modelTitle: "定时调度配置修改", opType: "update"});
                setTimeout(() => {
                    this.modelFormRef.current.setFieldsValue(Object.assign(
                        this.state.rowSelection,
                        {
                            lastExecuteTime: moment(this.state.rowSelection.lastExecuteTime, "YYYY-MM-DD HH:mm:ss"),
                            nextExecuteTime: moment(this.state.rowSelection.nextExecuteTime, "YYYY-MM-DD HH:mm:ss"),
                            cronExpression: this.showByCron(this.state.rowSelection.cronExpression),
                        }
                    ))
                }, 50)
            } else {
                message.warning("请选择一条数据！")
            }
        }

        doDelete() {
            const self = this
            if (self.state.rowSelection) {
                Modal.confirm({
                    title: '删除提示',
                    content: '你确定要删除这条记录？',
                    okText: '确认',
                    cancelText: '取消',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            API.request({
                                baseURL: baseURL,
                                method: "delete",
                                url: "api/s/srvs/cron/conf",
                                data: self.state.rowSelection,
                            }).then(function (data) {
                                message.success("记录删除成功!")
                                resolve()
                                self.query(self.state.pageInfo.page)
                                self.setState({
                                    selectedRowKeys: []
                                })
                            })
                        });
                    },
                });
            } else {
                message.warning("请选择一条数据！")
            }
        }

        doView() {
            const self = this
            if (self.state.rowSelection) {
                this.setState({show: true, modelTitle: "定时调度配置详情", opType: "view"});
                setTimeout(() => {
                    this.modelFormRef.current.setFieldsValue(Object.assign(
                        this.state.rowSelection,
                        {
                            lastExecuteTime: moment(this.state.rowSelection.lastExecuteTime, "YYYY-MM-DD HH:mm:ss"),
                            nextExecuteTime: moment(this.state.rowSelection.nextExecuteTime, "YYYY-MM-DD HH:mm:ss"),
                            cronExpression: this.showByCron(this.state.rowSelection.cronExpression),
                        }
                    ))
                }, 50)
            } else {
                message.warning("请选择一条数据！")
            }
        }

        showByCron(cronExpression) {
            let cronList = cronExpression.trim().split(" ")
            let selectCron = ""
            if (cronList[5] == "?") {
                if (cronList[2] == "*" && cronList[3] == "*" && cronList[4] == "*") {
                    if (cronList[1].indexOf("*/") == -1) {
                        selectCron = "hours"
                        this.setState({minute: cronList[1]})
                        this.setState({selectCron: selectCron})
                    } else {
                        selectCron = "nMinutes"
                        cronList[1] = cronList[1].replace("*/", "");
                        this.setState({minute: cronList[1]})
                        this.setState({selectCron: selectCron})
                    }
                } else if (cronList[3] == "*" && cronList[4] == "*") {
                    if (cronList[2].indexOf("*/") == -1) {
                        selectCron = "day"
                        this.setState({hour: cronList[2]})
                        this.setState({minute: cronList[1]})
                        this.setState({selectCron: selectCron})
                    } else {
                        selectCron = "nHours"
                        cronList[2] = cronList[2].replace("*/", "");
                        this.setState({hour: cronList[2]})
                        this.setState({minute: cronList[1]})
                        this.setState({selectCron: selectCron})
                    }
                } else if (cronList[4] == "*") {
                    if (cronList[3].indexOf("*/") == -1) {
                        selectCron = "month"
                        this.setState({day: cronList[3]})
                        this.setState({hour: cronList[2]})
                        this.setState({minute: cronList[1]})
                        this.setState({selectCron: selectCron})
                    } else {
                        selectCron = "nDay"
                        cronList[3] = cronList[3].replace("*/", "");
                        this.setState({day: cronList[3]})
                        this.setState({hour: cronList[2]})
                        this.setState({minute: cronList[1]})
                        this.setState({selectCron: selectCron})
                    }
                }
            } else {
                selectCron = "week"
                this.setState({week: cronList[5]})
                this.setState({hour: cronList[2]})
                this.setState({minute: cronList[1]})
                this.setState({selectCron: selectCron})
            }
            this.selectCron(selectCron);
        }

        handleModelClose() {
            this.setState({
                show: false
            })
            this.modelFormRef.current.setFieldsValue({})
        }

        handleModlelOk() {
            const self = this
            const {opType} = self.state
            self.setState({
                loading: true
            })
            let cronExpression = this.createCron()
            if (opType == "add") {
                self.modelFormRef.current.validateFields().then(function (values) {
                    API.request({
                        baseURL: baseURL,
                        method: "post",
                        url: "api/s/srvs/cron/conf",
                        data: Object.assign(values, {
                            lastExecuteTime: values.lastExecuteTime ? values.lastExecuteTime.format("YYYY-MM-DD HH:mm:ss") : "",
                            nextExecuteTime: values.nextExecuteTime ? values.nextExecuteTime.format("YYYY-MM-DD HH:mm:ss") : "",
                            cronExpression: cronExpression,
                        })
                    }).then(function (data) {
                        message.success("操作成功");
                        self.setState({loading: false, show: false});
                        self.query(self.state.pageInfo.page);
                    }).catch(function (error) {
                        message.warning("操作失败");
                        self.setState({loading: false});
                    })
                }).catch(function (errorInfo) {
                    self.setState({loading: false})
                })
            } else if (opType == "update") {
                self.modelFormRef.current.validateFields().then(function (values) {
                    API.request({
                        baseURL: baseURL,
                        method: "put",
                        url: "api/s/srvs/cron/conf",
                        data: Object.assign(values, {
                            lastExecuteTime: values.lastExecuteTime ? values.lastExecuteTime.format("YYYY-MM-DD HH:mm:ss") : "",
                            nextExecuteTime: values.nextExecuteTime ? values.nextExecuteTime.format("YYYY-MM-DD HH:mm:ss") : "",
                            cronExpression: cronExpression,
                        })
                    }).then(function (data) {
                        message.success("操作成功");
                        self.setState({loading: false, show: false});
                        self.query(self.state.pageInfo.page);
                    }).catch(function (error) {
                        message.warning("操作失败");
                        self.setState({loading: false});
                    })
                }).catch(function (errorInfo) {
                    self.setState({loading: false});
                })
            } else {
                self.setState({loading: false, show: false})
            }
        }

        createCron() {
            let selectValue = this.state.selectCron;
            let cron = "";
            if (selectValue == "week") {
                cron = "? * " + this.state.week;
                cron = this.state.hour + " " + cron;
                cron = this.state.minute + " " + cron;
            } else if (selectValue == "month") {
                cron = "* ?";
                cron = this.state.day + " " + cron;
                cron = this.state.hour + " " + cron;
                cron = this.state.minute + " " + cron;
            } else if (selectValue == "nDay") {
                cron = "*/" + this.state.day + " * ?";
                cron = this.state.hour + " " + cron;
                cron = this.state.minute + " " + cron;
            } else if (selectValue == "day") {
                cron = "* * ?";
                cron = this.state.hour + " " + cron;
                cron = this.state.minute + " " + cron;
            } else if (selectValue == "nHours") {
                cron = this.state.hour.combobox("getText") + " * * ?";
                cron = this.state.minute + " " + cron;
            } else if (selectValue == "hours") {
                cron = this.state.minute + " * * * ?";
            } else {
                cron = "*/" + this.state.minute + " * * * ?";
            }
            cron = "0 " + cron;
            return cron
        }

        onChangeJobType(event) {
            if (event && (event == 'hsf' || event == 'dubbo')) {
                this.setState({serviceShow: true})
                this.setState({versionRule: [{required: true, message: "请输入定时服务版本"}]})
            } else {
                this.setState({serviceShow: false})
                this.setState({versionRule: []})
            }
        }

        selectCron(event) {
            this.setState({dayShow: false})
            this.setState({selectCron: event});
            if (event == "day" || event == "nHours") {
                this.setState({weekShow: false})
                this.setState({dayShow: false})
                this.setState({hourShow: true})
            } else if (event == "month" || event == "nDay") {
                this.setState({weekShow: false})
                this.setState({dayShow: true})
                this.setState({hourShow: true})
            } else if (event == "hours" || event == "nMinutes") {
                this.setState({weekShow: false})
                this.setState({dayShow: false})
                this.setState({hourShow: false})
            } else if (event == "week") {
                this.setState({weekShow: true})
                this.setState({dayShow: false})
                this.setState({hourShow: true})
            }
        }

        componentDidMount() {
            this.query()
            this.cronShowInit();
        }

        cronShowInit() {
            let hours = []
            let days = []
            let minutes = []
            for (let i = 0; i < 24; i++) {
                hours.push({label: i, value: i})
            }
            this.setState({hours: hours});
            for (let i = 0; i < 60; i++) {
                minutes.push({text: i, value: i});
            }
            this.setState({minutes: minutes})
            for (let i = 1; i < 32; i++) {
                days.push({text: i, value: i});
            }
            this.setState({days: days});
            this.setState({weekShow: false})
            this.setState({dayShow: false})
        }

        render() {
            return (
                <div style={{padding: "15px"}}>
                    {/* ref 创建 Form 实例的引用 */}
                    <Form ref={this.formRef}>
                        <Row>
                            <Col span="8">
                                <Form.Item label="定时作业编号" name="jobCode">
                                    <Input/>
                                </Form.Item>
                            </Col>
                            <Col className="btn-opt" style={{padding: "0 15px"}}>
                                <Button type="primary" onClick={this.query}>查询</Button>
                                <Button onClick={this.reset}>清空</Button>
                            </Col>
                        </Row>
                    </Form>
                    <div className="text-left btn-opt">
                        <Button type="primary" onClick={this.doAdd}>新增</Button>
                        <Button type="primary" onClick={this.doUpdate}>修改</Button>
                        <Button type="primary" onClick={this.doDelete}>删除</Button>
                        <Button type="primary" onClick={this.doView}>查看</Button>
                        <Button type="primary" onClick={this.doInitiate}>启用</Button>
                        <Button type="primary" onClick={this.doDisable}>禁用</Button>
                        <Button type="primary" onClick={this.doStart}>手动发起</Button>
                        <Button type="primary" onClick={this.doShowHistory}>运行历史</Button>
                    </div>
                    { /*
                        dataSource 为列表数组
                        onChange Table 内嵌分页 页码切换回调函数 
                        pagination Table 内嵌分页 配置 同 Pagination 组件API
                    */}
                    <Table dataSource={this.state.list} bordered
                           onChange={(pagination) => this.query(pagination.current)}
                           pagination={{
                               position: ["bottomLeft"],
                               current: this.state.pageInfo.page,
                               pageSize: this.state.pageInfo.size,
                               total: this.state.pageInfo.total
                           }}
                           rowSelection={{
                               type: "radio",
                               selectedRowKeys: this.state.selectedRowKeys,
                               onChange: this.tableSelect
                           }}>
                        { /* Table columns 的语法糖 最终还是给 Table 传递 columns 参数 dataIndex 便是对象属性  */}
                        <Table.Column title="定时作业编号" dataIndex="jobCode"></Table.Column>
                        <Table.Column title="定时作业描述" dataIndex="jobDesc"></Table.Column>
                        <Table.Column title="作业类类型" dataIndex="jobClassType"
                                      render={(text, record) => (formatter_JOB_CLASS_TYPE(text))}></Table.Column>
                        <Table.Column title="作业实现类" dataIndex="jobClass"></Table.Column>
                        <Table.Column title="作业类方法" dataIndex="jobMethod"></Table.Column>
                        <Table.Column title="Cron表达式" dataIndex="cronExpression"></Table.Column>
                        <Table.Column title="失败重试次数" dataIndex="againTime"></Table.Column>
                        <Table.Column title="重试间隔秒数" dataIndex="retrySecond"></Table.Column>
                        <Table.Column title="代理节点标识" dataIndex="agentId"></Table.Column>
                        <Table.Column title="所属系统" dataIndex="subsCode"></Table.Column>
                        <Table.Column title="最近一次执行" dataIndex="lastExecuteTime"></Table.Column>
                        <Table.Column title="下次执行时间" dataIndex="nextExecuteTime"></Table.Column>
                        <Table.Column title="耗时(秒)" dataIndex="costTime"></Table.Column>
                        <Table.Column title="备注" dataIndex="remark"></Table.Column>
                    </Table>

                    <Modal
                        title={this.state.modelTitle}
                        visible={this.state.show}
                        onCancel={this.handleModelClose}
                        onOk={this.handleModlelOk}
                        confirmLoading={this.state.loading}
                        destroyOnClose={false}
                        keyboard={false}
                        style={{top: 20}}
                        okText="确定"
                        cancelText="取消"
                        width={'100%'}>
                        <Form ref={this.modelFormRef} labelCol={{span: 8}} wrapperCol={{span: 16}}>
                            <Row>
                                <Col span="12">
                                    <Form.Item label="定时作业编号" name="jobCode"
                                               rules={[{required: true, message: "请输入定时作业编号"}]}>
                                        <Input placeholder="请输入"
                                               disabled={this.state.opType == 'view' || this.state.opType == 'update'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="定时作业描述" name="jobDesc">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="作业类类型" name="jobClassType"
                                               rules={[{required: true, message: "请输入作业类类型"}]}>
                                        <Select allowClear placeholder="请选择"
                                                options={JOB_CLASS_TYPE.map(function (item) {
                                                    return {label: item.cnname, value: item.enname}
                                                })} disabled={this.state.opType == 'view'}
                                                value={this.state.jobClassType} onSelect={this.onChangeJobType}>
                                        </Select>
                                    </Form.Item>
                                </Col>

                                {this.state.serviceShow ? (
                                    <Col span="12">
                                        <Form.Item label="服务版本" name="serviceVersion"
                                                   rules={this.state.versionRule}>
                                            <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                        </Form.Item>
                                    </Col>) : null
                                }

                                {this.state.serviceShow ? (
                                    <Col span="12">
                                        <Form.Item label="服务组别" name="serviceGroup">
                                            <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                        </Form.Item>
                                    </Col>) : null}

                                {this.state.serviceShow ? (
                                    <Col span="12">
                                        <Form.Item label="服务超时时间" name="serviceTimeout">
                                            <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                        </Form.Item>
                                    </Col>) : null}


                                <Col span="12">
                                    <Form.Item label="作业实现类" name="jobClass"
                                               rules={[{required: true, message: "请输入作业实现类"}]}>
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="作业类方法" name="jobMethod"
                                               rules={[{required: true, message: "请输入作业类方法"}]}>
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="Cron表达式" name="cronExpression" value={this.state.cron}>

                                        <Select className="combobox" id="selectCron" style={{width: "20%"}}
                                                value={this.state.selectCron} onSelect={this.selectCron}
                                                disabled={this.state.opType == 'view'}>
                                            <option value="day">每天</option>
                                            <option value="nDay">N天</option>
                                            <option value="hour">每小时</option>
                                            <option value="nHour">N小时</option>
                                            <option value="nMinute">N分钟</option>
                                            <option value="week">每星期</option>
                                            <option value="month">每月</option>
                                        </Select>

                                        {
                                            this.state.weekShow ? (

                                                <Select className="combobox" id="week" value={this.state.week}
                                                        style={{width: "20%"}}
                                                        onSelect={(value) => (this.setState({week: value}))}
                                                        disabled={this.state.opType == 'view'}>
                                                    <option value="1">周一</option>
                                                    <option value="2">周二</option>
                                                    <option value="3">周三</option>
                                                    <option value="4">周四</option>
                                                    <option value="5">周五</option>
                                                    <option value="6">周六</option>
                                                    <option value="7">周日</option>
                                                </Select>
                                            ) : null
                                        }

                                        {

                                            this.state.dayShow ? (
                                                <div style={{display: "inline"}}>
                                                    <Select className="combobox" id="day" style={{width: "20%"}}
                                                            value={this.state.day} options={this.state.days}
                                                            onSelect={(value) => (this.setState({day: value}))}
                                                            disabled={this.state.opType == 'view'}>
                                                    </Select>
                                                    <span>天</span>
                                                </div>
                                            ) : null
                                        }
                                        {
                                            this.state.hourShow ? (
                                                <div style={{display: "inline"}}>
                                                    <Select className="combobox" id="hour"
                                                            options={this.state.hours}
                                                            value={this.state.hour} style={{width: "20%"}}
                                                            onSelect={(value) => (this.setState({hour: value}))}
                                                            disabled={this.state.opType == 'view'}>
                                                    </Select><span>时</span></div>

                                            ) : null
                                        }

                                        <Select className="combobox" id="minute" value={this.state.minute}
                                                onSelect={(value) => (this.setState({minute: value}))}
                                                style={{width: "20%"}}
                                                options={this.state.minutes} disabled={this.state.opType == 'view'}>
                                        </Select><span>分</span>

                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="失败重试次数" name="againTime"
                                               rules={[{required: true, message: "请输入失败重试次数"}]}>
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="重试间隔秒数" name="retrySecond">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="代理节点标识" name="agentId">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="所属系统" name="subsCode"
                                               rules={[{required: true, message: "请输入所属系统"}]}>
                                        <Input placeholder="请输入"
                                               disabled={this.state.opType == 'view' || this.state.opType == 'update'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="最近一次执行时间" name="lastExecuteTime"
                                               rules={[{required: true, message: "请输入最近一次执行时间"}]}>
                                        <DatePicker placeholder="请选择" showTime format="YYYY-MM-DD HH:mm:ss"
                                                    disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="下次执行时间" name="nextExecuteTime"
                                               rules={[{required: true, message: "下次执行时间"}]}>
                                        <DatePicker placeholder="请选择" showTime format="YYYY-MM-DD HH:mm:ss"
                                                    disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="耗时(秒)" name="costTime">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="备注" name="remark">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                            </Row>
                        </Form>
                    </Modal>
                </div>
            )
        }
    }

    ReactDOM
        .render(
            <antd.ConfigProvider locale={antd.locales.zh_CN}>
                <App/>
            </antd.ConfigProvider>,
            document
                .getElementById(
                    'app'
                )
        )
    ;
</script>
</body>
</html>